import React, { useState, useEffect } from 'react'
import { Modal, Button, Input, Table, Space, message, Popconfirm } from 'antd';
import {
    getQuestionsType,
    insertQuestionsType,
    delQuestionsType
} from '../../api/exam'

export default function ExamClassify() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [val, setVal] = useState("")
    const [list, setList] = useState([])

    const init = () => {
        getQuestionsType().then(res => {
            // 给数据添加key
            let arr = res.data.data
            arr.forEach(item => {
                item.key = item.questions_type_id
            })
            setList(arr)
        })
    }

    const confirm = (id) => {
        delQuestionsType({
            id
        }).then(res => {
            message.success(res.data.msg)
            init()
        })
    }

    const cancel = (e) => {
        console.log(e);
        message.error('Click on No');
    }

    const columns = [
        {
            title: '类型ID',
            dataIndex: 'questions_type_id',
            key: 'questions_type_id'
        },
        {
            title: '类型名称',
            dataIndex: 'questions_type_text',
            key: 'age',
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record, index) => (
                <Space size="middle">
                    <Popconfirm
                        title="确定要删除么？"
                        onConfirm={() => {
                            confirm(text.key)
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <Button type="primary" danger>删除</Button>
                    </Popconfirm>

                </Space>
            )
        }
    ]

    const showModal = () => {
        setIsModalVisible(true);
    };

    // 确定
    const handleOk = () => {
        setIsModalVisible(false);
        insertQuestionsType(
            {
                text: val,
                sort: String(Math.random()).slice(3, 8)
            }
        ).then(res => {
            message.success(res.data.msg)
            init()
            setVal("")
        })

    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };



    useEffect(() => {
        init()
    }, [])
    return (
        <div>
            试题分类
            <div>
                <Button className='mt15' type="primary" onClick={showModal}>
                    + 添加类型
                </Button>
                <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Input value={val} onChange={(ev) => {
                        setVal(ev.target.value)
                    }} />
                </Modal>
            </div>

            <div className='mt15'>
                <Table columns={columns} dataSource={list} />
            </div>
        </div>
    )
}
